import React, { useState, useEffect } from 'react'
import '../styles/JSXInfoDisplay.css'

function JSXInfoDisplay() {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [user, setUser] = useState({
    name: '李四',
    age: 28,
    email: 'lisi@example.com',
    skills: ['React', 'JavaScript', 'CSS', 'HTML'],
    isOnline: true,
    lastLogin: new Date(Date.now() - 3600000) // 1小时前
  })

  const [posts, setPosts] = useState([
    { id: 1, title: 'React 基础教程', author: '张三', likes: 42, comments: 8 },
    { id: 2, title: 'JSX 语法详解', author: '李四', likes: 38, comments: 12 },
    { id: 3, title: '组件化开发', author: '王五', likes: 56, comments: 15 }
  ])

  const [isLoading, setIsLoading] = useState(true)

  // 模拟数据加载
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [])

  // 更新时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  const formatDate = (date) => {
    return date.toLocaleString('zh-CN')
  }

  const getTimeAgo = (date) => {
    const now = new Date()
    const diff = now - date
    const minutes = Math.floor(diff / 60000)
    const hours = Math.floor(diff / 3600000)
    const days = Math.floor(diff / 86400000)

    if (days > 0) return `${days}天前`
    if (hours > 0) return `${hours}小时前`
    if (minutes > 0) return `${minutes}分钟前`
    return '刚刚'
  }

  const getStatusColor = (isOnline) => {
    return isOnline ? '#4caf50' : '#f44336'
  }

  const getSkillLevel = (skill) => {
    const levels = {
      'React': '高级',
      'JavaScript': '高级',
      'CSS': '中级',
      'HTML': '中级'
    }
    return levels[skill] || '初级'
  }

  return (
    <div className="jsx-info-display">
      <h1>📊 JSX 信息展示技巧</h1>
      
      <div className="display-sections">
        {/* 基本信息展示 */}
        <section className="display-section">
          <h2>📝 基本信息展示</h2>
          <div className="info-grid">
            <div className="info-card">
              <h3>用户信息</h3>
              <div className="user-details">
                <p><strong>姓名：</strong>{user.name}</p>
                <p><strong>年龄：</strong>{user.age}岁</p>
                <p><strong>邮箱：</strong>{user.email}</p>
                <p>
                  <strong>状态：</strong>
                  <span 
                    className="status-dot"
                    style={{ backgroundColor: getStatusColor(user.isOnline) }}
                  ></span>
                  {user.isOnline ? '在线' : '离线'}
                </p>
                <p><strong>最后登录：</strong>{getTimeAgo(user.lastLogin)}</p>
              </div>
            </div>

            <div className="info-card">
              <h3>实时时间</h3>
              <div className="time-display">
                <p><strong>当前时间：</strong></p>
                <div className="clock">
                  {currentTime.toLocaleTimeString('zh-CN')}
                </div>
                <p><strong>日期：</strong>{currentTime.toLocaleDateString('zh-CN')}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 条件渲染 */}
        <section className="display-section">
          <h2>🎯 条件渲染</h2>
          <div className="conditional-examples">
            <div className="example-card">
              <h3>加载状态</h3>
              {isLoading ? (
                <div className="loading">
                  <div className="spinner"></div>
                  <p>正在加载数据...</p>
                </div>
              ) : (
                <div className="loaded">
                  <p>✅ 数据加载完成！</p>
                  <p>共加载了 {posts.length} 篇文章</p>
                </div>
              )}
            </div>

            <div className="example-card">
              <h3>用户技能</h3>
              <div className="skills-list">
                {user.skills.map((skill, index) => (
                  <div key={index} className="skill-item">
                    <span className="skill-name">{skill}</span>
                    <span className="skill-level">{getSkillLevel(skill)}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="example-card">
              <h3>在线状态</h3>
              <div className="status-display">
                {user.isOnline ? (
                  <div className="online-status">
                    <span className="status-icon">🟢</span>
                    <span>用户当前在线</span>
                  </div>
                ) : (
                  <div className="offline-status">
                    <span className="status-icon">🔴</span>
                    <span>用户当前离线</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* 列表渲染 */}
        <section className="display-section">
          <h2>📋 列表渲染</h2>
          <div className="list-examples">
            <div className="posts-list">
              <h3>文章列表</h3>
              {posts.map(post => (
                <div key={post.id} className="post-item">
                  <div className="post-header">
                    <h4>{post.title}</h4>
                    <span className="post-author">作者：{post.author}</span>
                  </div>
                  <div className="post-stats">
                    <span className="stat">
                      <span className="stat-icon">👍</span>
                      {post.likes}
                    </span>
                    <span className="stat">
                      <span className="stat-icon">💬</span>
                      {post.comments}
                    </span>
                  </div>
                </div>
              ))}
            </div>

            <div className="skills-display">
              <h3>技能展示</h3>
              <div className="skills-grid">
                {user.skills.map((skill, index) => (
                  <div key={index} className="skill-card">
                    <div className="skill-icon">
                      {skill === 'React' && '⚛️'}
                      {skill === 'JavaScript' && '📜'}
                      {skill === 'CSS' && '🎨'}
                      {skill === 'HTML' && '🌐'}
                    </div>
                    <div className="skill-info">
                      <h4>{skill}</h4>
                      <p>{getSkillLevel(skill)}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* 计算属性 */}
        <section className="display-section">
          <h2>🧮 计算属性</h2>
          <div className="calculation-examples">
            <div className="calc-card">
              <h3>统计信息</h3>
              <div className="stats-grid">
                <div className="stat-item">
                  <span className="stat-label">文章总数</span>
                  <span className="stat-value">{posts.length}</span>
                </div>
                <div className="stat-item">
                  <span className="stat-label">总点赞数</span>
                  <span className="stat-value">
                    {posts.reduce((sum, post) => sum + post.likes, 0)}
                  </span>
                </div>
                <div className="stat-item">
                  <span className="stat-label">总评论数</span>
                  <span className="stat-value">
                    {posts.reduce((sum, post) => sum + post.comments, 0)}
                  </span>
                </div>
                <div className="stat-item">
                  <span className="stat-label">平均点赞</span>
                  <span className="stat-value">
                    {Math.round(posts.reduce((sum, post) => sum + post.likes, 0) / posts.length)}
                  </span>
                </div>
              </div>
            </div>

            <div className="calc-card">
              <h3>用户统计</h3>
              <div className="user-stats">
                <p><strong>技能数量：</strong>{user.skills.length}</p>
                <p><strong>高级技能：</strong>
                  {user.skills.filter(skill => getSkillLevel(skill) === '高级').length}
                </p>
                <p><strong>在线时长：</strong>
                  {user.isOnline ? '当前在线' : getTimeAgo(user.lastLogin)}
                </p>
                <p><strong>年龄组：</strong>
                  {user.age < 25 ? '青年' : user.age < 35 ? '中年' : '成熟'}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* 格式化显示 */}
        <section className="display-section">
          <h2>🎨 格式化显示</h2>
          <div className="format-examples">
            <div className="format-card">
              <h3>时间格式化</h3>
              <div className="time-formats">
                <p><strong>完整时间：</strong>{formatDate(currentTime)}</p>
                <p><strong>仅时间：</strong>{currentTime.toLocaleTimeString()}</p>
                <p><strong>仅日期：</strong>{currentTime.toLocaleDateString()}</p>
                <p><strong>相对时间：</strong>{getTimeAgo(user.lastLogin)}</p>
              </div>
            </div>

            <div className="format-card">
              <h3>数字格式化</h3>
              <div className="number-formats">
                <p><strong>点赞数：</strong>{posts[0]?.likes.toLocaleString()}</p>
                <p><strong>百分比：</strong>{(posts[0]?.likes / 100 * 100).toFixed(1)}%</p>
                <p><strong>货币：</strong>¥{(Math.random() * 1000).toFixed(2)}</p>
                <p><strong>科学计数：</strong>{(posts[0]?.likes * 1000).toExponential(2)}</p>
              </div>
            </div>
          </div>
        </section>

        {/* 动态样式 */}
        <section className="display-section">
          <h2>🎨 动态样式</h2>
          <div className="dynamic-styles">
            <div className="style-card">
              <h3>状态指示器</h3>
              <div className="status-indicators">
                {posts.map(post => (
                  <div 
                    key={post.id} 
                    className="status-indicator"
                    style={{
                      backgroundColor: post.likes > 40 ? '#4caf50' : '#ff9800',
                      color: 'white',
                      padding: '0.5rem',
                      borderRadius: '4px',
                      margin: '0.25rem'
                    }}
                  >
                    {post.title} - {post.likes}赞
                  </div>
                ))}
              </div>
            </div>

            <div className="style-card">
              <h3>进度条</h3>
              <div className="progress-bars">
                {user.skills.map((skill, index) => (
                  <div key={index} className="progress-item">
                    <span>{skill}</span>
                    <div className="progress-bar">
                      <div 
                        className="progress-fill"
                        style={{
                          width: `${(index + 1) * 25}%`,
                          backgroundColor: getSkillLevel(skill) === '高级' ? '#4caf50' : '#ff9800'
                        }}
                      ></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}

export default JSXInfoDisplay 